<template>
  <div class="card-container">
    <el-input
      style="margin-bottom:35px"
      placeholder="输入关键字进行过滤"
      v-model="filterText">
    </el-input>
      <el-tree
        default-expand-all
        :data="treeList"
        :filter-node-method="filterNode"
        :expand-on-click-node="false"
        :render-content="renderContent"
        class="filter-tree tree-grid"
        ref="tree">
      </el-tree>

       <!-- 校色名称 -->
       <el-dialog
        title="修改名称"
        top="30vh"
        :visible.sync="modifyTreeNodeVisible"
        width="30%">
        <el-input
          v-model="input"
          clearable>
        </el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="modifyTreeNodeVisible = false">关 闭</el-button>
          <el-button type="primary" @click="modifyTreeNodeVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- end -->

  </div>
</template>
<script>
export default {
  name: 'treeBear',
  props: {
    treeData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      input: '',
      filterText: '',
      modifyTreeNodeVisible: false,
      treeList: this.treeData,
    }
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    },
  },
  methods: {
    handleCommand(data, active) {
      switch (active) {
        case 'edit':
          this.modifyTreeNodeVisible = true
          this.input = data.label
          return
        case 'delete':
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!',
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          })
      }
    },
    renderContent (h, { node, data, store }) {
      console.log(store,data)
      return (
        <div class="node_edit" style="font-size:14px">
          {node.label}
          <el-dropdown
            on-command={ this.handleCommand.bind(this, data) }
            placement="bottom-start">
            <span class="el-dropdown-link">
              <i class="el-icon-edit-outline el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                icon="el-icon-edit"
                command={ 'edit' }>
                修改
              </el-dropdown-item>
              <el-dropdown-item
                icon="el-icon-delete"
                command={ 'delete' }>
                删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      )
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
  },
}
</script>
<style lang="scss" scoped>
.card-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  padding-right: 0;
}
</style>